<template>
	<view style="margin-top: 60px;background-color: #e7ecef;">
		<ytabs @change="changeTabs" ellipsis="false" :type="navType" title-inactive-color="#000000"
			title-active-color="#000000" color="#ffff00" v-model="activeIndex" animated swipeable swipeAnimated
			:isLazyRender="false">

			<ytab v-for="(title, index0) in tabs" :title="title" :key="index0">

				<view v-if="index0 === 0" class="" style="z-index: 99;padding: 5px;">
					<square ref="square"></square>
				</view>

				<view v-if="index0 === 1" class="">
					<splicingOrders ref="splicingOrders"></splicingOrders>
				</view>

				<view v-if="index0 === 2" class="">
					<star ref="star"></star>
				</view>

				<view v-if="index0 === 3" class="">
					<school ref="school"></school>
				</view>

			</ytab>



		</ytabs>
	</view>
</template>

<script>
	import square from './square.vue'
	import splicingOrders from './splicingOrders.vue'
	import star from './star.vue'
	import school from './school.vue'
	import ytab from '@/components/y-tabs/components/y-tab/y-tab.vue'
	import ytabs from '@/components/y-tabs/components/y-tabs/y-tabs.vue'

	export default {
		props: {
			//从父组件接收到的控制导航类型
			navType: {
				type: String,
				default: "card"
			}
		},
		data() {
			return {
				tabs: ['广场', '拼单', '明星', '校园', '我的海鲜》'],
				activeIndex: 0, // 标签页当前选择项的下标



			};
		},

		methods: {
			changeTabs() {
				if (this.activeIndex === 4) {
					//触发父组件change事件，使得父组件的current为1
					this.$emit("change", 1)


				}
			},
			getTopicSkuList() {
				//通知子组件触底
				if (this.activeIndex === 0) {
					this.$refs.square[0].getSquareSkuList()

				}else if(this.activeIndex === 1){
					this.$refs.splicingOrders[0].getSplicingOrdersSkuList()
					
				}else if(this.activeIndex === 2){
					this.$refs.star[0].getStarSkuList()
					
				}else if(this.activeIndex === 3){
					this.$refs.school[0].getSchoolSkuList()
					
				}
			}

		},

		components: {

			ytab,
			ytabs,
			splicingOrders,

			star,
			school,
			square
		},

		mounted() {
			console.log(this.$refs);
		},

	};
</script>

<style lang="scss" scoped>
	.ytabs /deep/ scroll-view {
		margin-top: 30px;
	}
</style>